<%@ include file="/common/taglibs.jsp"%>

<html xmlns="http://www.w3.org/1999/xhtml">
	
	<head>
	<title><fmt:message key="webapp.name" /></title>
	
	<script type="text/javascript" src="<c:url value='/scripts/ghostPlay/play.js'/>"></script>
	
	</head>
	<body>
		<c:if test="${!empty param.csstheme}">
			<c:set var="cssThemeParam">?csstheme=${param.csstheme}</c:set>
		</c:if>
		<form name="gameForm">
			<table   align=center width="100%" style="background-color:#d7e9f5; margin-left: ">
				<tr align="center">
					<td colspan="3">
						<br/>
						<b>
							<font color="green"><div id="statusMessage"></font> </div>
						</b>
						<br/>
					</td>
				</tr>
				<tr>
					<td>
						<div id="userHelperLabel"> <b>Pick your first letter:</b> </div>
					</td>
					<td>
						<input type="text" name="enteredLetter" id="enteredLetter" maxlength="1" size="1"></input>
						
					</td>
					<td>
						<a onclick="processPlayerInputProt()" id="charSubmit" href="#">Submit</a>
					</td>
				</tr>
				<tr>
					<td>Word:</td>
					<td>
						<input type="text" name="updatedWord" id="updatedWord" disabled="disabled"></input>			
					</td>
					<td>${cssTheme}
						<a href="play.htm${cssThemeParam}" onclick="$('enteredLetter').focus()" id="reset" href="#">Reset</a>
					</td>		
				</tr>
				<tr align="center" style="height: 100px" >
					<td colspan="3">
						
					</td>
				</tr>						
				<tr style="height: 100px" >
					<td colspan="3">
						<p>
							<b>Optimal Ghost - Instructions</b> <br/><br/>
								In the game of Ghost, two players take turns building up an English word from left to right. Each player
								adds one letter per turn. The goal is to not complete the spelling of a word: if you add a letter that
								completes a word (of 4+ letters), or if you add a letter that produces a string that cannot be extended
								into a word, you lose.
						</p>
					</td>
				</tr>	
				
			</table>
		</form>
	</body>
</html>
